<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<script src="../vue.js"></script>

<body>
  <div id="app" v-my-directive>

  </div>

  <script>
    // 定义一个MyPlugin（自定义插件）对象
    let MyPlugin = {}
    MyPlugin.install = function (vue, options) {
      console.log(options);
      // 在插件中为vue添加自定义指令
      Vue.directive("my-directive", {
        bind(el, binding) {
          // 为自定义指令绑定的当前DOM元素设置style样式
          el.style = "width: 100px; height: 100px; background-color: pink;"
        }
      })
    }

    Vue.use(MyPlugin, {
      someOption: true
    })
    var vm = new Vue({
      el: "#app",

    })
  </script>
</body>

</html>